<template>
    <div>
        <div style="margin-bottom: 20px;">
            <el-input v-model="id" placeholder="请输入id" style="width: 200px;margin-right: 20px;"></el-input>
            <el-button type="primary" @click="select">查询</el-button>
        </div>
        <el-table border :data="list" style="width: 100%">
            <el-table-column prop="id" label="学生id" />
            <el-table-column prop="account" label="账号" />
            <el-table-column prop="minzu" label="民族" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="性别" >
                <template #default="scope">
                    {{scope.row.sex==0?'男':'女'}}
                </template>
</el-table-column>
<el-table-column label="操作">
    <template #default="scope">
                    <!-- {{scope.row}} -->
                    <el-button type="text" @click="updatee(scope.row)">修改</el-button>
                    <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
                </template>
</el-table-column>
<!-- <el-table-column prop="address" label="Address" /> -->
</el-table>
<el-dialog v-model="dialogVisible" title="修改学生信息" width="30%" :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="formRef" style="width:250px;" :inline="false" size="default">
        <el-form-item prop="account">
            <el-input v-model="form.account" placeholder="请输入账号">

            </el-input>
        </el-form-item>
        <el-form-item prop="minzu">
            <el-input v-model="form.minzu" placeholder="请输入民族">

            </el-input>
        </el-form-item>
        <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名">

            </el-input>
        </el-form-item>
        <el-form-item prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别" style="width:100%">
                <el-option label="男" :value="0"></el-option>
                <el-option label="女" :value="1"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submit">
      确定
    </el-button>
  </span>
</template>
</el-dialog>
</div>
</template>
<script setup>
    import {
        onMounted,
        ref,
        reactive
    } from 'vue'
    import {
        getStudents,
        deletee,
        update
    } from "~/api/xm.js"
    import {
        useStore
    } from 'vuex'
    import {
        ElMessage,
        ElMessageBox
    } from 'element-plus'
    const store = useStore()
    const list = ref([])
    const id = ref('')
    const dialogVisible = ref(false)
    const form = reactive({
        account: "",
        password: "",
        banjiId: "",
        name: "",
        sex: "",
        minzu: "",
        type: "",
    })
    const rules = {
        account: [{
            required: true,
            message: '账号不能为空',
            trigger: 'blur',
        }],
        password: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        }],
        banjiId: [{
            required: true,
            message: '班级不能为空',
            trigger: 'blur',
        }],
        name: [{
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
        }],
        sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'blur',
        }],
        minzu: [{
            required: true,
            message: '民族不能为空',
            trigger: 'blur',
        }],
        type: [{
            required: true,
            message: '类型不能为空',
            trigger: 'blur',
        }],
    }
    const formRef = ref(null)
    const rowId = ref('')

    function submit() {
        formRef.value.validate((valid) => {
            if (valid) {
                form.id = rowId.value
                update(form).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        dialogVisible.value = false
                        select()
                    }
                })
            }
        })
    }

    function updatee(row) {
        dialogVisible.value = true
        form.account = row.account
        form.name = row.name
        form.minzu = row.minzu
        form.sex = row.sex
        rowId.value = row.id
    }

    function deleteRow(row) {
        ElMessageBox.confirm(
                '是否要删除?',
                '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                deletee(row.id).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        select()
                    }
                })

            })

    }

    function select() {
        getStudents({
            banjiId: store.state.banjiId,
            id: id.value
        }).then(res => {
            list.value = res.data
            console.log(res);
        })
    }
    onMounted(() => {
        select()
    })
</script>